/*
 *@author: YangJie
 *@date: 2021-04-12 10:10:57
 *@version:
 *@description:参数设置->系统管理->单位信息
 */
import React, { Component } from 'react';
import { Form, Tabs, Descriptions, Button, Upload, Modal } from 'antd';
import '@/assets/css/settings';

const { TabPane } = Tabs;

function getBase64(file) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = () => resolve(reader.result);
		reader.onerror = error => reject(error);
	});
}

//
class UnitInformation extends Component {
	state = {
		//公司图片上传
		previewLogoVisible: false,
		previewLogoImage: '',
		companyLogoImg: [],
		//公司APP图片上传
		previewAppVisible: false,
		previewAppImage: '',
		companyAppImg: []
	};
	//初始化加载数据
	fetch = data => {
		// this.setState({ loading: true })
		// this.post('/airCargo/pageList',{data}).then(res => {
		// 	this.setState({
		// 		loading: false,
		// 		dataSource: res.data.data,
		// 		total:res.data.total,
		// 		formValues:data
		// 	});
		// })
	};

	//表单查询
	filterSubmit = values => {
		values.pageNum = this.state.formValues.pageNum;
		values.pageSize = this.state.formValues.pageSize;
		this.fetch(values);
	};

	//图片上传相关函数
	handleLogoCancel = () => this.setState({ previewLogoVisible: false });
	handleAppCancel = () => this.setState({ previewAppVisible: false });

	handleLogoPreview = async file => {
		if (!file.url && !file.preview) {
			file.preview = await getBase64(file.originFileObj);
		}

		this.setState({
			previewLogoImage: file.url || file.preview,
			previewLogoVisible: true
		});
	};
	handleAppPreview = async file => {
		if (!file.url && !file.preview) {
			file.preview = await getBase64(file.originFileObj);
		}

		this.setState({
			previewAppImage: file.url || file.preview,
			previewAppVisible: true
		});
	};

	handleLogoChange = ({ fileList }) => {
		fileList = fileList.slice(-1);
		this.setState({ companyLogoImg: fileList });
	};
	handleAppChange = ({ fileList }) => {
		fileList = fileList.slice(-1);
		this.setState({ companyAppImg: fileList });
	};

	render() {
		const { previewLogoVisible, previewLogoImage, companyLogoImg, previewAppVisible, previewAppImage, companyAppImg } = this.state;

		const descItemList = [
			{ key: '1', label: '注册单位名称', value: '体验账号' },
			{ key: '2', label: '注册联系人', value: '科技' },
			{ key: '3', label: '注册手机号', value: '1234567891' },
			{ key: '4', label: '用户数', value: '9999' },
			{ key: '5', label: '微信报修用户数', value: '8000' },
			{ key: '6', label: '短信剩余数', value: '0' },
			{ key: '7', label: '注册时间', value: '2017-09-28' },
			{ key: '8', label: '到期时间', value: '2052-02-29' }
		];

		//生成公司列表 ----没弄出来
		function GenDescriptions() {
			const descList = [];
			descItemList.forEach(element => {
				const form = <Descriptions.Item label={element.label}>{element.value}</Descriptions.Item>;
				descList.push(form);
			});
			return descList;
		}

		return (
			<div className="shadow-radius">
				<Tabs>
					<TabPane tab="单位信息" key="1">
						<div className="content-title">公司信息</div>
						<Descriptions bordered size="small" column={1} style={{ width: 500 }}>
							<Descriptions.Item label="注册单位名称:">体验账号</Descriptions.Item>
							<Descriptions.Item label="注册联系人:">科技</Descriptions.Item>
							<Descriptions.Item label="注册手机号:">1234567891</Descriptions.Item>
							<Descriptions.Item label="用户数:">9999</Descriptions.Item>
							<Descriptions.Item label="微信报修用户数:">8000</Descriptions.Item>
							<Descriptions.Item label="短信剩余数:">0</Descriptions.Item>
							<Descriptions.Item label="注册时间:">2017-09-28</Descriptions.Item>
							<Descriptions.Item label="到期时间:">2052-02-29</Descriptions.Item>
						</Descriptions>

						<div className="content-title">上传公司图片</div>
						<Upload listType="picture-card" fileList={companyLogoImg} onPreview={this.handleLogoPreview} onChange={this.handleLogoChange}>
							<Button icon="file-image" type="primary">
								图片上传
							</Button>
						</Upload>
						<Modal visible={previewLogoVisible} footer={null} onCancel={this.handleLogoCancel}>
							<img alt="公司图片" style={{ width: '100%' }} src={previewLogoImage} />
						</Modal>
						<Button type="primary">提交</Button>

						<div className="content-title">上传App公司图片</div>
						<Upload listType="picture-card" fileList={companyAppImg} onPreview={this.handleAppPreview} onChange={this.handleAppChange}>
							<Button icon="file-image" type="primary">
								图片上传
							</Button>
						</Upload>
						<Modal visible={previewAppVisible} footer={null} onCancel={this.handleAppCancel}>
							<img alt="App公司图片" style={{ width: '100%' }} src={previewAppImage} />
						</Modal>
						<Button type="primary">提交</Button>
					</TabPane>
				</Tabs>
			</div>
		);
	}
}
export default Form.create()(UnitInformation);
